{% extends 'echartsweb/layout/base_layui.html' %}
{% load static %}
<!-- 添加当前页面的标题 -->
{% block title %}
    Echarts中国地图可视化
{% endblock %}

<!-- 添加当前页面的CSS-->
{% block css %}
    <style>
        #echartContainer {
            width: 100%;
            min-height:1000px;
            padding: 20px;
        }

        #echartContainer > div {
            width: 100%;

        }

        #echartContainer > div > div {
            float: left;
            width: 80%;
            height: 600px;
            margin: auto;
        }
    </style>
{% endblock %}

<!-- 添加当前页面面包屑导航的名称 -->
{% block breadcrumb %}
    中国地图可视化
{% endblock %}

<!-- 添加当前页面的内容 -->
{% block content %}
    <!-- 内容02: 查询区域 -->
    <div class="queryArea" style="margin-top: 20px;">
        <form class="layui-form" action="" method="post">
            {% csrf_token %}
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label" for="q_date"><b>日期：</b></label>
                    <div class="layui-input-inline">
                        <input name="q_date" id="q_date" class="layui-input" value="{{ DATA.date }}">

                    </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" id="btnQuery" class="layui-btn">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>

                </div>
            </div>
        </form>

    </div>



    <div id="echartContainer">
        <div>
            <div id="echarts_china_hight"></div>

        </div>
        <div>
              <div id="echarts_china_low"></div>
        </div>
    </div>
{% endblock %}

<!-- 添加当前页面的JS -->
{% block js %}
    <!-- 引入地图js地图文件-->
    <script src="{% static 'js/map/js/china.js' %}"></script>
    <script>
        // 接收数据
        var DATA = {{ weather|safe }};

        // 入口函数
        $(function () {
             // 初始化日期
            initDatetimePicker();

            // 加载最高温度平局值
            loadChinaHightAVG();

            // 加载json格式的地图
            loadChinaMapJson();

        });
         //==========初始化日期模板 ========
        function initDatetimePicker() {
            layui.use('laydate', function () {
                let laydate = layui.laydate;
                laydate.render({
                    elem: '#q_date',
                    value: DATA.date,
                })
            })
        }

        // ================使用JS的中国地图============
       function loadChinaHightAVG() {
        // 实例化一个echarts对象，放置在容器中
        var myChart = echarts.init(document.getElementById('echarts_china_hight'));

        // 设置echart图的option
        var option = {
            backgroundColor: '#FFF',
            title: {
                text: '全国各省市平均最高温度',
                subtext: DATA.date,
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },

            //左侧小导航图标
            visualMap: {
                min: -6,
                max: 25,
                x: 'left',
                y: 'center',
                text: ['最高', '最低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },

            //配置属性
            series: [{
                name: '数据',
                type: 'map',  // 类型一定要是map
                mapType: 'china',   // 因为加载了中国地图，这里一定填写china
                roam: true,
                label: {
                    normal: {
                        show: true  //省份名称
                    },
                    emphasis: {
                        show: true
                    }
                },
                data: DATA.map.hight //数据[{name:'河南省', value:14}, {name:'北京市', value:12}]
            }]
        };

        // 配置option到echarts对象
        myChart.setOption(option);
    }


        //================使用Json版本的中国地图 ===========
       function loadChinaMapJson() {
        $.get("{% static 'js/map/json/china.json' %}", function (chinajson) {
                //注册吉林的地图
                echarts.registerMap('china', chinajson);
                //把地图初始化到div
                var chart = echarts.init(document.getElementById('echarts_china_low'));
                chart.setOption({

                    backgroundColor: '#FFF',
                    title: {
                        text: '中国各省市平均最低温可视化展现',
                        subtext: DATA.date,
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },

                    //左侧小导航图标
                    visualMap: {
                        min: -20,
                        max: 18,
                        x: 'left',
                        y: 'center',
                        text: ['最高', '最低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        }
                    },

                    //配置属性
                    series: [{
                        name: '数据',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            normal: {
                                show: true  //省份名称
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: DATA.map.low //数据
                    }]

                })
            }
        )
    }



    </script>



{% endblock %}

